.header{
    span{
        color: red;
        &:active {
            color:green;
        }
        &:hover {
            color:blue;
        }

    }
}
// scss中需要有大括号和分号 而sass结尾的不能有


// Sass基础 变量入门
$text-color: #444;
$small-font: 14px+3px; //支持加减乘除运算
$default-font: 'microsoft yahei';
// 在sass中 变量必须得提前定义 不能写在应用之后 定义在代码块内的变量只能在代码块内使用


.title{
    color:lighten($text-color,20%); //提供全局的功能函数
    font-family: $default-font;
}
.subtitle{
    color:darken($text-color,20%);
    font-size:$small-font;
}
.text{
    color:$text-color;
    font-size: $small-font;
}

// 变量值可以相互引用  如下highlight-border可以引用highlight-color 
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}
// 变量名用中划线和下划线分割指向同一个 为了和compass配合使用
